<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="form-item">
          <span class="title">电话号</span>
          <el-input placeholder="请输入手机号" v-model="param.phone"></el-input>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="form-item">
          <span class="title">微信昵称</span>
          <el-input placeholder="请输入微信昵称" v-model="param.nickname"></el-input>
        </div>
      </el-col>
      <el-col :span="5" v-show="param.appStu != 2">
        <div class="form-item">
          <span class="title">代理等级</span>
          <el-select v-model="param.levelId" placeholder="请选择">
            <el-option
              v-for="item in delegeteOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item button-container">
          <el-button type="primary" @click="searchCustomer" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="param.appStu" @tab-click="handleClick">
      <el-tab-pane label="待审批" name="0"></el-tab-pane>
      <el-tab-pane label="已审批" name="1"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
    </el-tabs>
    <div class="table-body">
      <el-table :data="tableData" style="width: 100%" v-if="param.appStu == 0">
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column prop="wechatNick" label="微信昵称"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="agentName" label="申请等级"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope" v-if="param.appStu == 0">
            <template>
              <el-button @click="handleClickAgree(scope.row)" type="text" size="small">同意</el-button>
              <el-button @click="handleClickRefuse(scope.row)" type="text" size="small">拒绝</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="tableData" style="width: 100%" v-if="param.appStu == 1">
        <el-table-column prop="wechatNick" label="微信昵称"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="orderNum" label="订单数"></el-table-column>
        <el-table-column prop="productNum" label="售出商品数"></el-table-column>
        <el-table-column prop="orderNum" label="会员数"></el-table-column>
        <el-table-column prop="agentName" label="代理等级"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope" v-if="param.appStu == 1">
            <template>
              <el-button
                @click="handleClickForbid(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.status==0"
              >启用</el-button>
              <el-button
                @click="handleClickForbid(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.status==1"
              >禁用</el-button>
              <el-button @click="handleClickDetail(scope.row)" type="text" size="small">详情</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="tableData" style="width: 100%" v-if="param.appStu == 2">
        <el-table-column prop="createTime" label="申请时间"></el-table-column>
        <el-table-column prop="wechatNick" label="微信昵称"></el-table-column>
        <el-table-column prop="agentName" label="代理等级"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="modifyTime" label="审批时间"></el-table-column>
      </el-table>

      <!-- <el-table-column prop="createTime" v-if="param.appStu != 1" label="申请时间"></el-table-column>
      
        <el-table-column prop="wechatNick" label="微信昵称"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="agentName" :label="param.appStu == 0?'申请等级':'代理等级'"></el-table-column>

                <el-table-column prop="diamondNum"
                                 label="会员数">
                </el-table-column>
                <el-table-column prop="diamondNum"
                                 label="售出商品数">
                </el-table-column>
                <el-table-column prop="diamondNum"
                                 label="订单数">
                </el-table-column>

                <el-table-column fixed="right"
                                 label="操作"
                                 width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClickForbid(scope.row)"
                                   type="text"
                                   size="small"
                                   v-show="scope.row.status==0">启用</el-button>
                        <el-button @click="handleClickForbid(scope.row)"
                                   type="text"
                                   size="small"
                                   v-show="scope.row.status==1">禁用</el-button>
                        <el-button @click="handleClickDetail(scope.row)"
                                   type="text"
                                   size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

        <el-table-column fixed="right" label="操作" v-if="param.appStu != 2" width="100">
          <template slot-scope="scope">
            <template v-if="param.appStu == 0">
              <el-button @click="handleClickAgree(scope.row)" type="text" size="small">同意</el-button>
              <el-button @click="handleClickRefuse(scope.row)" type="text" size="small">拒绝</el-button>
            </template>
            <template v-if="param.appStu == 1">
              <el-button
                @click="handleClickForbid(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.status==0"
              >启用</el-button>
              <el-button
                @click="handleClickForbid(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.status==1"
              >禁用</el-button>
              <el-button @click="handleClickDetail(scope.row)" type="text" size="small">详情</el-button>
            </template>
          </template>
      </el-table-column>-->

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="param.total"
          :page-size.sync="param.pageSize"
          :current-page.sync="param.pageNum"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: {
        phone: "", // 电话
        nickname: "", //昵称
        agentName: "", //代理等级
        levelId: "",
        appStu: 0, //审批状态 0待审批 1已同意 2已拒绝
        pageNum: 1, //第几页
        pageSize: 10, //一页多少条
        total: 0
      },
      delegeteOptions: [],
      tableData: []
    };
  },
  mounted() {
    this.initData();
    this.initDelegeteOptions();
  },
  methods: {
    initData() {
      this.$service
        .getDelegeteList({
          tbAgent: {
            phone: this.param.phone ? this.param.phone : "",
            wechatNick: this.param.nickname ? this.param.nickname : "",
            levelId: this.param.levelId ? this.param.levelId : "",
            appStu: this.param.appStu ? this.param.appStu : "0"
          },
          queryRequest: {
            pageSize: this.param.pageSize,
            pageNum: this.param.pageNum
          }
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.rows;
          this.param.total = res.data.total;
        });
    },
    initDelegeteOptions() {
      this.$service.getAgentLevel().then(res => {
        this.delegeteOptions = res.data || [];
      });
    },
    currentChange(e) {
      this.initData();
    },
    searchCustomer() {
      this.initData();
    },
    resetSearchCotnet() {
      this.param.phone = "";
      this.param.nickname = "";
      this.param.levelId = "";
      this.initData();
    },
    handleClick(e) {
      this.param.appStu = e.name;
      this.initData();
    },
    handleClickAgree(scope) {
      this.$confirm("确定同意选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$service
            .agentUpdate({
              id: scope.id, //主键
              customerId: scope.customerId, //用户id
              appStu: "1", //审批状态 0 待审批  1 通过 2 拒绝
              appuserId: this.Global.user.userId, //审批人标识 暂时可不传
              appResult: "" //审批意见  没有可不传
            })
            .then(res => {
              this.$message({
                message: "成功",
                type: "success"
              });
              this.initData();
            });
        })
        .catch(res => {
          this.$message({
            message: "已取消",
            type: "success"
          });
        });
    },
    handleClickRefuse(scope) {
      this.$confirm("确定拒绝选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$service
            .agentUpdate({
              id: scope.id, //主键
              appStu: "2", //审批状态 0 待审批  1 通过 2 拒绝
              appuserId: this.Global.user.userId, //审批人标识 暂时可不传
              appResult: "" //审批意见  没有可不传
            })
            .then(res => {
              this.$message({
                message: "拒绝成功",
                type: "success"
              });
              this.initData();
            });
        })
        .catch(res => {
          this.$message({
            message: "已取消",
            type: "success"
          });
        });
    },
    handleClickForbid(scope) {
      if (scope.status == 1) {
        this.$confirm("确定禁用选中记录吗？", "提示", {
          type: "warning"
        })
          .then(() => {
            this.$service
              .agentDelete({
                id: scope.id, //主键
                status: 0
              })
              .then(res => {
                this.$message({
                  message: "禁用成功",
                  type: "success"
                });

                this.initData();
              });
          })
          .catch(res => {
            this.$message({
              message: "已取消",
              type: "success"
            });
          });
        //console.log("禁用");
      } else {
        //console.log("启用");
        this.$confirm("确定启用选中记录吗？", "提示", {
          type: "warning"
        })
          .then(() => {
            this.$service
              .agentDelete({
                id: scope.id, //主键
                status: 1
              })
              .then(res => {
                this.$message({
                  message: "启用成功",
                  type: "success"
                });

                this.initData();
              });
          })
          .catch(res => {
            this.$message({
              message: "已取消",
              type: "success"
            });
          });
      }
    },
    handleClickDetail(scope) {
      this.$router.push({
        path: "/delegeteDetail/" + scope.customerId
      });
    }
  }
};
</script>

<style lang="scss" >
.form-item {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    white-space: nowrap;
    min-width: 80px;
  }
  .el-input {
    flex: 1;
  }
}

.button-container {
  justify-content: flex-start;
}

.pagination {
  width: 100%;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.el-tabs {
  margin-top: 20px;
}
</style>